<template>
  <div>
    <Cotainer :datas="matchedItems"></Cotainer>
    <Display :datas="matchedItems" @add-cart="handleAddToCart" @add-like="handleAddToLick"></Display>
  </div>
</template>

<script>

import Cotainer from '@/components/detailedBox/cotainer.vue'
import Display from '@/components/detailedBox/display.vue'
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['list'])
  },
  components: {
    Cotainer,
    Display,
  },
  data() {
    return {
      matchedItems: []
    }
  },
  created() {
    //调用函数
    this.updateMatchedItems();
  },
  watch: {
    '$route': {
      handler: 'updateMatchedItems',
      immediate: true
    } // 确保在组件创建时立即执行一次
  },
  methods: {
    // 更新匹配的项 将传过来的id进行对比得到对应的商品数据
    updateMatchedItems() {
      //接收传过来的id
      const id = parseInt(this.$route.params.id);
      // 判断是不是数字
      if (!isNaN(id)) {
        // 过滤出id相同的数据并存起来
        this.matchedItems = this.list.filter(item => item.id === id);
      } else {
        //不是数字返回空的数组
        this.matchedItems = [];
      }
    },
    //添加购物车
    handleAddToCart(data) {
      //封装添加购物车模块
      this.$store.commit('cart/addToCart', data);
    },
    //添加喜欢
    handleAddToLick(data) {
      // console.log(data);
      // 获取本地存储中的购物车数据，如果没有则初始化为空数组
      let oldCartItems = JSON.parse(localStorage.getItem('lickData')) || [];
      // 遍历传递过来的新数据
      data.forEach(newItem => {
        // 检查新数据中的 ID 是否存在于旧数据中
        let existingItem = oldCartItems.find(item => item.id === newItem.id);
        // 如果存在相同 ID 的数据，则增加该商品的数量
        if (!existingItem) {
          oldCartItems.push(newItem);
          this.$message({
            showClose: true,
            message: '添加喜欢成功!',
            type: 'success'
          });
        } else {
          this.$message({
            showClose: true,
            message: '已添加过商品',
            type: 'error'
          });
        }
      });
      // 更新本地存储中的数据
      localStorage.setItem('lickData', JSON.stringify(oldCartItems));
    }




  },

}
</script>


<style scoped></style>
